import Svg from "@/components/base/Svg"
import styled from "@emotion/styled"
import { Pagination } from "swiper/modules"
import { Swiper, SwiperSlide } from "swiper/react"
import { BetItemProps, HistoryContent } from "../components/SlotBettingRankingsPopup/RealTime"
const Root = styled.div`
    background: #ffffff;
    border-radius: 10rem;
    width: 100%;
    margin-top: 12rem;
    .history-content {
        padding: 4rem;
        > ul {
            margin-top: 0 !important;
        }
    }
`

const BetHeader = styled.div`
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12rem;
    height: 56rem;
    position: relative;
`

const BetHeaderTitle = styled.div`
    font-size: 14rem;
    font-weight: 700;
    color: #000;
`

const BetDetailBtn = styled.div`
    width: 88rem;
    height: 24rem;
    background: #e8f3ff;
    border-radius: 4rem;
    color: #165dff;
    font-size: 14rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8rem;
    padding: 0 6rem 0 12rem;
    img {
        width: 8rem;
        height: 14rem;
    }
`

const Line = styled.div`
    width: 100%;
    height: 1px;
    background: #e5e6eb;
`

const SwiperContainer = styled(Swiper)`
    .swiper-pagination-bullet.swiper-pagination-bullet-active {
        background-color: #ff4757;
    }
`
const randomBetList = (): BetItemProps[] => {
    const list = Array.from({ length: 70 }, (_, i) => ({
        bet: Math.floor(Math.random() * 1000000) + 10000,
        bonus: Math.floor(Math.random() * 100000) + 1000,
        index: i + 1,
        player: {
            text: `Player${i + 1}***${Math.floor(Math.random() * 1000)}`,
            icon: ``,
        },
    }))
    return list
}
const transformBetList = (list: BetItemProps[]): BetItemProps[][] => {
    const result: BetItemProps[][] = []
    for (let i = 0; i < list.length; i += 10) {
        result.push(
            list.slice(i, i + 10).map((item, index) => ({
                ...item,
                id: String(i + index), // 将 number 类型转换为 string 类型
            })),
        )
    }
    return result
}

type IProps = {
    onHistoryClick?: () => void
}

export default function BetList({ onHistoryClick }: IProps) {
    return (
        <Root>
            <BetHeader>
                <BetHeaderTitle>Today's Real Time</BetHeaderTitle>
                <BetDetailBtn onClick={onHistoryClick}>
                    History
                    <Svg src="pages/Walfare/svg/arrow_right.svg" />
                </BetDetailBtn>
            </BetHeader>
            <Line />
            <SwiperContainer
                pagination={{ clickable: true }}
                modules={[Pagination]}
            >
                {transformBetList(randomBetList()).map((item, index) => (
                    <SwiperSlide key={index}>
                        <HistoryContent data={item} />
                    </SwiperSlide>
                ))}
            </SwiperContainer>
        </Root>
    )
}
